<template>
  <div class="min-h-screen bg-gray-100 pb-[80px]">
    <!-- 头部（保持不变） -->
    <div class="bg-white shadow-sm">
      <div class="container mx-auto px-4 py-3">
        <h2 class="text-center text-lg font-bold m-0">我的订单</h2>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="container mx-auto px-5 mt-4">
      <div v-if="sortedOrders.length > 0">
        <!-- 移除 @click="goToOrderDetail"，因为 OrderCard 已经处理跳转 -->
        <OrderCard
            v-for="order in sortedOrders"
            :key="order.id"
            :order="order"
            class="mb-3"
        />
      </div>

      <!-- 空状态（保持不变） -->
      <div v-else class="text-center py-12 text-gray-500">
        <div class="mb-2">
          <svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
          </svg>
        </div>
        <p class="text-base">暂无订单记录</p>
        <button
            @click="goToHome"
            class="mt-4 px-6 py-2 bg-blue-500 text-white rounded-full text-sm hover:bg-blue-600 transition-colors"
        >
          去逛逛
        </button>
      </div>
    </div>

    <BottomNav />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { getPaidOrders } from '@/utils/storage'
import OrderCard from '@/components/OrderCard.vue'
import BottomNav from '@/components/BottomNav.vue'

const router = useRouter()
const orders = ref([])

onMounted(() => {
  loadOrders()
})

const loadOrders = () => {
  orders.value = getPaidOrders().map(order => ({
    ...order,
    dishes: order.dishes.map(dish => ({
      ...dish,
      price: Number(dish.price) || 0
    })),
    total: Number(order.total) || 0
  }))
}

const sortedOrders = computed(() => {
  return [...orders.value].sort((a, b) =>
      new Date(b.timestamp) - new Date(a.timestamp)
  )
})

const goToHome = () => {
  router.push('/home')
}
</script>

<template>
  <Form @submit="handleLogin" :validation-schema="schema">
    <Field name="username" rules="required|min:4" />
    <ErrorMessage name="username" />
  </Form>
</template>
<script>
import { Form, Field, ErrorMessage } from 'vee-validate';
export default {
  components: { Form, Field, ErrorMessage },
  data() {
    return {
      schema: {
        username: 'required|min:4|max:20',
        password: 'required|regex:/^(?=.*[A-Z])(?=.*[0-9])/'
      }
    };
  }
};
</script>